<template>
	<view style="background: #F6F6F6;">
	
		<view class="" style="padding: 0 20rpx;">
			<goods :list='goods_lisr' :type='type' :shows="shows"></goods>
		</view>
		<u-tabbar :list="tabbar" :before-switch="beforeSwitch" :mid-button="true" :border-top="false"
			mid-button-size="110" active-color="#FF9A33" inactive-color="#999999"></u-tabbar>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import goods from '../../components/goods_lists.vue'
	export default {
		components: {
			goods
		},
		data() {
			return {
				tabbar: '',
				active: 1,
				goods_lisr: [],
				type: 0,
				shows:'',//控制子组件弹窗显示
			}
		},
		onShow() {
			// 根据商品类型,获取对应数据
			// if (uni.getStorageSync("goods_type") == 1) {
			// 	this.getlist(1, 1)
			// } else {
			// 	this.getlist(0, 0)
			// }
			this.shows=false

		},
		onLoad(e) {
			this.getlist(1, 1)
			this.tabbar = this.$store.state.tabbar
		},
		methods: {
			getlist(index, types) {
				this.type = types
				this.active = index
				if (types == 0) {
					// uni.setStorageSync("goods_type", 0)
					this.getShoeList()
				} else {
					// uni.setStorageSync("goods_type", 1)

					this.getgoodsList()
				}

			},
			// 获取线下取送商品
			getgoodsList() {
				let that = this
				uni.$u.http.post('/shoe/shoe_on_list', {
					page: 0,
					size: 100,
					user_id: uni.getStorage('userId'),
				}).then(res => {
					that.goods_lisr = res.data.data
				})
			},
			// 洗鞋类型接口
			getShoeList() {
				let that = this
				uni.$u.http.post('/shoe/shoe_index', {
					shoecabinet_id: that.$store.state.shoecabinet_id
				}).then(res => {
					that.goods_lisr = res.data
				})
			},

		}
	}
</script>

<style scoped>
	.sp_nav {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		display: grid;
		background: #ffffff;
		text-align: center;
		margin-bottom: 20rpx;
		grid-template-columns: 1fr 1fr;
	}

	.sp_nav_active {
		color: #FF9A33;
		position: relative;
	}

	.sp_nav_active:after {
		content: "";
		width: 55rpx;
		height: 2rpx;
		background: #FF9A33;
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translate(-50%, 0);
	}
</style>